Dream On: Modernizando a Vitrine Digital de Eventos
Desenvolvimento de um portal imersivo e totalmente adaptável (mobile & desktop) para agendamento de festas.
O Contexto
Salões de Festas & Presença Digital
O Dream On precisava ir além das redes sociais. Em um mercado visual, clientes querem explorar o espaço, verificar disponibilidade e entender os serviços sem precisar ligar ou esperar resposta via direct.
O Problema
Falta de Centralização
"Clientes se perdem em feeds de Instagram procurando fotos do ambiente ou informações de contato, gerando atrito na conversão."
O Desafio (HMW)
"Como podemos criar uma experiência web que transmita a elegância do salão, funcione perfeitamente em qualquer dispositivo e impulsione o fechamento de mais contratos?"
Ficha Técnica
UI UX Designer (End-to-End)
Liderei desde a descoberta até o código final.
3 semanas
- UX Research & Benchmarking
- UI Design & Prototipagem
- Front-end (HTML/CSS/JavaScript)
Pesquisa & Insights
Para garantir que o site atendesse às expectativas, realizei uma análise competitiva e pesquisas com potenciais clientes.
A Decisão é Visual e Mobile
Descobri que 85% das decisões de contrato para fechar o espaço começam com uma busca de imagens no celular, antes mesmo de verificar o preço.
Concorrência
Sites locais eram lentos e não responsivos.
Entrevistas
Usuários querem ver o salão decorado.
Performance
Imagens pesadas causam desistência.
Estratégia Visual
O foco do projeto foi criar uma hierarquia visual clara que guiasse o usuário da inspiração (fotos) à ação (contato).
Imersão & Elegância
Utilizei um layout limpo com espaços em branco generosos e tipografia moderna para deixar que as fotos dos eventos fossem as protagonistas.
Interface Responsiva
Visualização da Interface Web
Abordagem Mobile First
Embora a imagem ao lado mostre a versão desktop, todo o desenvolvimento começou pensando nas telas pequenas (smartphones), já que 85% do tráfego vem de dispositivos móveis. Menus complexos foram substituídos por navegação simplificada.
Tipografia & Legibilidade
Uso da família Inter com escala tipográfica fluida (`clamp()`). Isso garante que títulos impactantes no desktop não quebrem o layout ou ocupem a tela inteira quando acessados via mobile.
Componentização Responsiva
A galeria utiliza CSS Grid inteligente, que alterna automaticamente de 1 coluna (mobile) para 3 ou 4 colunas (desktop) sem necessidade de media queries excessivas.
.gallery-grid { display: grid; // Grid adapta-se ao tamanho da tela grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
Resultados & Impacto no Negócio
A nova vitrine digital não apenas modernizou a marca, mas se tornou um motor de resultados, convertendo curiosidade em contratos fechados.
Novos Contratos
Aumento direto na contratação de festas de casamentos e formaturas nos primeiros 3 meses após o lançamento.
Mais Qualificados
Clientes passaram a chegar na reunião presencial já cientes da infraestrutura e serviços, tornando a negociação mais objetiva.
Atendimento Inicial
Redução drástica em perguntas repetitivas (como "capacidade" e "endereço") via WhatsApp, otimizando o tempo do proprietário.
Aprendizados do Projeto
Principais lições técnicas e de design durante o desenvolvimento.
Mobile First
Começar o desenvolvimento pensando nas telas pequenas forçou a priorização do conteúdo essencial, resultando em um site mais limpo também no desktop.
Otimização de Imagens
Em um site focado em galerias, equilibrar a qualidade visual com o tempo de carregamento foi crucial para manter a performance alta.
Figma para Código
Aprimorei o workflow de handoff, traduzindo propriedades do Figma (Auto Layout) diretamente para Flexbox e Grid no CSS.
Explore o projeto
O código fonte está disponível no GitHub e o protótipo de alta fidelidade pode ser visualizado no Figma.